<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/10
  Time: 22:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>芝麻优购-商品</title>
    <meta name="description" content="芝麻优购ZM.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购">
    <!-- 引入网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 初始化css文件 -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/getParameter.js"></script>
    <script>
        $(function(){
            var query = getParameter("query");
            query = window.decodeURIComponent(query);
            $.get("https://api-hmugo-web.itheima.net/api/public/v1/goods/search",{query:query},function (data) {
                var lis = '';
                for (var i =0; i<data.message.goods.length;i++){
                    var item = data.message.goods[i];
                    if(!item.goods_small_logo ||item.goods_small_logo ==null ){
                        item.goods_small_logo="images/no.png"
                    }
                    var li = '<li><a href="/details.jsp?goods_id='+item.goods_id+'">\n' +
                        '            <img id="search-img" src="'+item.goods_small_logo+'" alt="">\n' +
                        '            <h5 class="m-title">'+item.goods_name+'</h5>\n' +
                        '            <p class="m-price"><em>¥'+item.goods_price+'</em> <del>￥6988</del></p>\n' +
                        '            <div class="jdt">\n' +
                        '                已售<i>87</i>%\n' +
                        '                <div class="bar"><div class="bar-in"></div></div>\n' +
                        '                剩余<em>66</em>件\n' +
                        '            </div>\n' +
                        '            <a href="javascript:;" class="m-submit">立即抢购</a>\n' +
                        '        </a></li>'
                    lis +=li;
                }
                $("#shopul").html(lis);
            })
        })
    </script>
    <script>
        $(function () {
            $("#search-right").click(function () {
                if($("#search-left").val()){
                    location.href="/list.jsp?query="+$("#search-left").val();
                }else{
                    alert("请输入内容");
                    //location.href="/list.jsp"
                }
            })
        })
    </script>
</head>
<body>
<header class="shortcut">
    <div class="w">
        <div class="shortcut-left fl">
            <ul>
                <li>芝麻优购欢迎你!&nbsp;&nbsp;</li>
                <li><a href="/login.jsp">请登录..</a>
                    <a href="/regist.jsp" class="red">免费注册</a></li>
            </ul>
        </div>
        <div class="shortcut-right fr">
            <ul>
                <li><a href="/index.jsp">我的订单</a></li><li class="space"></li>
                <li><a href="/index.jsp">我的优购</a><i></i></li><li class="space"></li>
                <li><a href="/index.jsp">芝麻会员</a></li><li class="space"></li>
                <li><a href="/index.jsp">企业采购</a></li><li class="space"></li>
                <li><a href="/index.jsp">芝麻优购</a><i></i></li><li class="space"></li>
                <li><a href="/index.jsp">客户服务</a><i></i></li><li class="space"></li>
                <li><a href="/exit">退出</a><i></i></li>
            </ul>
        </div>
    </div>
</header>
<div class="searchitem w">
    <div class="searchitem-logo"><h1><a href="/index.jsp" title="芝麻优购">芝麻优购</a></h1>
        <div class="sk"><img src="upload/sk.png"></div>
    </div>
    <div class="searchitem-search">
        <input type="text" name="" id="search-left" placeholder="请搜索内容...">
        <button id="search-right" style="height: 36px">搜索</button>
    </div>
    <div class="searchitem-search-hotwords">
        <ul>
            <li><a href="" class="red">优惠购首发</a></li>
            <li><a href="">亿元优惠</a></li>
            <li><a href="">9.9元团购</a></li>
            <li><a href="">每满99减30</a></li>
            <li><a href="">办公用品</a></li>
            <li><a href="">电脑</a></li>
            <li><a href="">通信</a></li>
        </ul>
    </div>
    <div class="searchitem-car">
       <a href="/car.jsp"> <i class="searchitem-car-left"></i>
        <span class="searchitem-car-content">我的购物车</span>
        <i class="searchitem-car-right"></i>
           <i class="carcount">8</i></a>
    </div>
</div>
<nav>
    <div class="navitems w">
        <ul class="nav-left">
            <li><a href="">品优秒杀</a></li>
            <li><a href="">即将售罄</a></li>
            <li><a href="">超值低价</a></li>
        </ul>
        <ul class="nav-right">
            <li></li>
            <li><a href="">手机</a></li>
            <li><a href="">华为</a></li>
            <li><a href="">iPhone</a></li>
            <li><a href="">三星</a></li>
            <li><a href="">小米</a></li>
            <li><a href="">OPPO</a></li>
            <li><a href="">VIVO</a></li>
            <li><a href="">一加六</a></li>
            <li><a href="">更多分类<i class="bto">&#xea52</i></a></li>
        </ul>
    </div>
</nav>
<!-- 头部结束 -->
<div class="head w">
    <img src="upload/list-head.png">
</div>
<!-- 手机产品介绍 -->
<div class="mobile w">
    <ul id="shopul">
    </ul>
</div>

<!-- 分页制作，页码跳转 -->
<div class="page w">
    <div class="page_num">
        <a href="#" class="pn_prev">&lt;上一页</a>
        <a href="#"  class="current">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" class="datted">...</a>
        <a href="#" class="pn_next">下一页&gt;</a>
    </div>
    <div class="page_skip">
        共10页&nbsp;第
        <input type="text" name="" id="">
        页<button>确定</button>
    </div>
</div>
</body>
</html>
